<template>
  <div class="list">
      <div class="item" 
           v-for="item of letters"
           :key="item"
           :ref='item'
           @click='handleLetterClick'
           @touchstart='handleTouchStart'
           @touchmove='handleTouchMove'
           @touchend='handleTouchEnd'
      >
          {{item}}
      </div>
  </div>
</template>

<script>
export default {
    name:'CityAlphabet',
    props:{
        cities:Object
    },
    computed:{
        letters(){//弄一个数组
            const letters=[];
            for(let i in this.cities){
                letters.push(i);
            }
            return letters;//['A','B','C',...]
        }
    },
    data(){
        return{
            touchStatus:false,//用来限制touch事件触发
            startY:0,//性能优化
            timer:null,//性能优化
        }
    },
    updated(){//性能优化,改变并渲染完毕后执行
        this.startY=this.$refs['A'][0].offsetTop;
    },
    methods:{
        handleLetterClick(e){//传递数据给父组件，然后在传给list组件
            this.$emit('change',e.target.innerText)
        },
        handleTouchStart(){//这三个函数分别对于三个触摸事件
            this.touchStatus=true;
        },
        handleTouchMove(e){
            if(this.touchStatus){//实现拖动变化功能
                if(this.timer){//性能优化,节流，给一个极短的时间，这个时间内重复的话就不给出响应，不然持续不断的响应对性能有影响
                   clearTimeout(this.timer);
                }
                this.timer=setTimeout(()=>{
                     // const startY=this.$refs['A'][0].offsetTop;//获得A到父对象(header)的距离
                    const touchY=e.touches[0].clientY-79;//获得e.touches[0](手指纵坐标)-79=手指触摸处到header的距离
                    // console.log(e.touches[0])
                    const index=Math.floor((touchY-this.startY)/20);//两者相减，再除以每个字母所占空间，得到index
                    // console.log(index)
                    if(index>=0&&index<this.letters.length){//界限判定，即在字母内才生效
                    this.$emit('change',this.letters[index])//同样归到自定义的chang事件里面，数据一变动另一边的侦听器就会发生变化
                    }
                },16)
            }
        },
        handleTouchEnd(){
            this.touchStatus=false;
        },
    }
}
</script>

<style scoped>
.list{
    position:absolute;
    right:0;
    bottom:0;
    top:1.58rem;
    width:0.4rem;
    display: flex;
    flex-direction: column;
    justify-content:center;
    color:#00bcd4;
}
.item{
    line-height:0.4rem;
    text-align: center;
}
</style>